<template>
  <div class="collect">
    <div class="collect-header">
      <div class="collect-title">
        <i class="el-icon-collection-tag" style="color: #ff6700"></i>
        上传产品
      </div>
    </div>
    <div
      style="
        background-color: white;
        height: 800px;
        width: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin: 0 auto;
      "
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        style="padding-top: 30px"
      >
        <el-form-item label="产品名称 ：">
          <el-input v-model="form.productName" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="产品标题 ：">
          <el-input v-model="form.productTitle" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="产品简介 ：">
          <el-input v-model="form.productIntro" style="width: 280px"></el-input>
        </el-form-item>
        <el-form-item label="图片上传 ：">
          <el-upload
            action="http://localhost:7001/product-upload/image-upload"
            list-type="picture-card"
            :on-success="success"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">完 成</el-button>
          <el-button @click="$router.back()">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      form: {
        imgUrl: "",
      },
    };
  },
  methods: {
    onSubmit() {
      const fromData = new FormData();
      fromData.append("productName", this.form.productName);
      fromData.append("productTitle", this.form.productTitle);
      fromData.append("productIntro", this.form.productIntro);
      fromData.append("imgUrl", this.form.imgUrl);
      fromData.append("businessId", this.getUser.businessId);

      if (!this.form.imgUrl) return this.$message.error("请上传图片");
      this.$axios
        .post("/product-upload/product-save", fromData)
        .then((res) => {
            this.$message({ message: res.msg, type: "success" });
            this.$router.back();
      
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    success(res) {
      console.log(res);
      this.form.imgUrl = res.url;
      //res.url = this.form.imgUrl;
    },
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
};
</script>

<style>
.collect {
  background-color: #f5f5f5;
}
.collect .collect-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.collect .collect-header .collect-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}
.collect .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.collect .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
.detail {
  margin: 20px auto;
  width: 600px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 178px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>